import React,{useState, useEffect} from 'react'
import { Button, Form, Input } from 'antd';
import { LockOutlined, UserOutlined ,MailOutlined,SafetyCertificateOutlined} from '@ant-design/icons';
import {Link, useNavigate} from "react-router-dom"
import "./index.less"

import {RegisterApi, VerificationApi,ForgetPwApi,ForgetPwVfApi} from "request/api"

import {  message } from 'antd';
{/* <MailOutlined /> */}
{/* <FormOutlined /> */}
{/* <FileProtectOutlined /> */}
{/* <CarryOutOutlined /> */}
{/* <InsuranceOutlined /> */}
{/* <SafetyCertificateOutlined /> */}

const logo = require("assets/images/logo.png")

interface IRegisterLogin {
  username : string | number,
  password : string | number
  password1? : string | number
}

export default function Register() {
  const navigate = useNavigate()
  const [verCode,setVercode] = useState('')
  const [id,setid] = useState(0)
  const regEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/ //验证邮箱正则
  const regPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[._~!@#$^&*])[A-Za-z0-9._~!@#$^&*]{8,18}$/ //密码邮箱正则

  const [Email, setEmail] = useState(50);
  const [BtnStart, setBtnStart] = useState(true);
  const [BtnStarts, setBtnStarts] = useState(false);
  const [onBtn, setonBtn] = useState(false);

  useEffect(() => {

  }, [Email]);

  const onFinish = (values: any) => {
    let { password,email,code,} = values
    if(!email && !code){
      message.error('请填写参数',1.5);
      return
    }

    interface IRes {
      errCode? : number,
      message? : string,
      data? : any;
    }
    

    ForgetPwApi({
       password,codeid:id ,email:verCode,code,
    }).then((res:IRes)=>{
      if(res.errCode === 0){
        message.success(res.message, 1.5)
      }else{
        message.error(res.data, 1.5)
        return
      }
      setTimeout(() => {
        navigate('/login')
      },1500)
    })
  };

  const onFinishFailed = (errorInfo: any) => {
  };

  const onChanges = (event:any)=>{
    setVercode(event.target.value)
    if (regEmail.test(event.target.value)) {
      setEmail(6)
      setBtnStart(false)
    }else{
      setEmail(50)
      setBtnStart(true)
    }
  }

  const verificationBtn = ()=>{
    if(!verCode){
      message.error('请输入验证码', 1.5)
      return
    }
    ForgetPwVfApi({
      e_mail:verCode
    }).then((res:any)=>{
      if(res.errCode === 0){
        setid(res.data[0].id)
        message.success(res.message+'，在五分钟后重试', 1.5)
        setonBtn(true)
        setBtnStart(false)
        setBtnStarts(true)
        
        setTimeout(() => {
          setonBtn(false)
          setBtnStarts(false)
      }, 1000*60*5);

      }else{
        message.error(res.data, 1.5)
      }
    })
  }

  return (
    <div className='login_box'>
      <img src={logo} className="logo" alt="" />
      <Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
      size='large'
    >

      <div style={{position:'relative'}}>
      <Form.Item
        name="email"
        rules={[{ min: Email,message: '邮箱格式不正确!'  }
        ]}
      >
        <Input disabled={onBtn}  prefix={<MailOutlined className="site-form-item-icon" />} onChange={onChanges}   placeholder='请输入邮箱' />
        
      </Form.Item>
      <Button disabled={BtnStart || BtnStarts} className='btn' onClick={verificationBtn} type="primary"  size='large' >
          发送验证码
        </Button>
      </div>
      
      <Form.Item
        name="code"
        rules={[{ required: true, min: 6 , max:6,message: '请输入6位数字验证码!'  },{
          type: 'number', 
          message: '请输入数字!',
          transform:(value)=> {return Number(value)}
      }, ]}
      >
        <Input disabled={BtnStart}  prefix={< SafetyCertificateOutlined className="site-form-item-icon" />}   placeholder='请输入验证码' />
      </Form.Item>

      <Form.Item
        name="password"
        rules={[
          { 
            required: true, 
            message: '请输入密码!' 
          }, ({ getFieldValue }) => ({
            validator(_, value) {
              if (!value || regPassword.test(value)) {
                return Promise.resolve();
              }
              return Promise.reject(new Error('请输入由字母、数字、特殊符号组成8-18位密码'));
            },
          }),
        ]}
      >
        <Input.Password  prefix={<LockOutlined className="site-form-item-icon" />}   placeholder='请输入密码' />
      </Form.Item>

      <Form.Item>
        <Button type="primary" block htmlType="submit" size='large'>
          修改
        </Button>
      </Form.Item>

      <Form.Item >
        <Link  to="/login" >返回登录</Link>
      </Form.Item>
    </Form>
    </div>
  );
}
